<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title></title>
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <script src="./js/flexible2.0.js"></script>
  <script src="./js/vue/vue-2.6.1.min.js"></script>
  <script src="./js/vue/axios.min.js"></script>
  <link rel="stylesheet" href="./js/nutui/nutui.css" />
  <script src="./js/nutui/nutui.js"></script>
</head>

<body>
  <div class="bg-43a298 page-exchange-prize flex flex-col" id="app">
    <div class="main-caption flex-shrink-0"></div>
    <div class="main-body flex-1 flex flex-col">
      <p class="color-fde4bb text-center f26 flex-shrink-0">截止兑换时间:9月13日 00:00</p>
      <ul class="flex flex-row sec-userinfo mt-40 flex-shrink-0">
        <li>
          <div class="avatar">
            <img
              src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
          </div>
        </li>
        <li class="flex flex-col items-center color-fde4bb">
          <p class="f24">可兑幸运分</p>
          <div class="mt-10 flex flex-row justify-center items-center">
            <span class="coin-pic mr-10"></span>
            <p class="f32">1200</p>
          </div>
        </li>
        <li class="flex flex-row justify-center items-center">
          <a class="goprize-btn" href="./woDeJiangPin.html">我的奖品</a>
        </li>
      </ul>
      <!-- 修改0905  -->
      <div class="sec-exchange-container">
        <div class="tab-hd">
          <div @click="switcTab(1)" class="item-cell" :class="tabIndex==1 ? 'active':''">博饼好“礼”</div>
          <div @click="switcTab(2)" class="item-cell" :class="tabIndex==2 ? 'active':''">博饼好“券</div>
        </div>
        <div class="sec-exchange-list flex-1">
          <div class="color-0d4741 f24 pt-30 pb-20 fw-bold">
            <p class="text-center">数量有限兑完即止。每日奖品以当日为准。</p>
            <p class="text-center mt-10">每个奖品每人限兑1份。(具体以奖品说明为准)</p>
          </div>
          <ul v-if="tabIndex==1" class="exchange-list">
            <li>
              <div class="pl-10 pr-30 py-15 area-lf">
                <div class="flex flex-row items-center">
                  <div class="pic flex-shrink-0 "><img
                      src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                  </div>
                  <div class="color-165044 f24 leading-normal pl-10">好“礼”好“礼”好礼”好“礼”好“礼6666666666666</div>
                </div>
                <div class="mt-10">
                  <div class="count-progress"></div>
                  <div class="f18 color-165044 text-center mt-5">剩余数量 <span class="count-p fw-bold">0%</span></div>
                </div>
              </div>
              <div class="area-rt">
                <div class="f24 flex flex-row items-center"><span class="coin-pic mr-10"></span>5000</div>
                <div class="handle-dh mt-15">请在农行掌银app兑换</div>
              </div>
            </li>
            <li>
              <div class="pl-10 pr-30 py-15 area-lf">
                <div class="flex flex-row items-center">
                  <div class="pic flex-shrink-0"><img
                      src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                  </div>
                  <div class="color-165044 f24 leading-normal pl-10">好“礼”好“礼”好</div>
                </div>
                <div class="mt-10">
                  <div class="count-progress"></div>
                  <div class="f18 color-165044 text-center mt-5">剩余数量 <span class="count-p fw-bold">0%</span></div>
                </div>
              </div>
              <div class="area-rt">
                <div class="f24 flex flex-row items-center"><span class="coin-pic mr-10"></span>5000</div>
                <div class="handle-dh mt-15">兑换</div>
              </div>
            </li>
            <li>
              <div class="pl-10 pr-30 py-15 area-lf">
                <div class="flex flex-row items-center">
                  <div class="pic flex-shrink-0 "><img
                      src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                  </div>
                  <div class="color-165044 f24 leading-normal pl-10">好“礼”好“礼”好“礼”好“礼”好“礼”</div>
                </div>
                <div class="mt-10">
                  <div class="count-progress"></div>
                  <div class="f18 color-165044 text-center mt-5">剩余数量 <span class="count-p fw-bold">0%</span></div>
                </div>
              </div>
              <div class="area-rt">
                <div class="f24 flex flex-row items-center"><span class="coin-pic mr-10"></span>5000</div>
                <div class="handle-dh mt-15">兑换</div>
              </div>
            </li>
          </ul>
          <ul v-else class="exchange-list">
            <li>
              <div class="pl-10 pr-30 py-15 area-lf">
                <div class="flex flex-row items-center">
                  <div class="pic flex-shrink-0 "><img
                      src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                  </div>
                  <div class="color-165044 f24 leading-normal pl-10">好好“券</div>
                </div>
                <div class="mt-10">
                  <div class="count-progress"></div>
                  <div class="f18 color-165044 text-center mt-5">剩余数量 <span class="count-p fw-bold">0%</span></div>
                </div>
              </div>
              <div class="area-rt">
                <div class="f24 flex flex-row items-center"><span class="coin-pic mr-10"></span>5000</div>
                <div class="handle-dh mt-15">请在农行掌银app兑换</div>
              </div>
            </li>
            <li>
              <div class="pl-10 pr-30 py-15 area-lf">
                <div class="flex flex-row items-center">
                  <div class="pic flex-shrink-0"><img
                      src="https://cdn-oss-beijing.myckjr.com/13/resource/admin-fe_lj7l_He5ptyyTC7btsd3yxDXx.jpg?x-oss-process=style/w800" />
                  </div>
                  <div class="color-165044 f24 leading-normal pl-10">好好“券</div>
                </div>
                <div class="mt-10">
                  <div class="count-progress"></div>
                  <div class="f18 color-165044 text-center mt-5">剩余数量 <span class="count-p fw-bold">0%</span></div>
                </div>
              </div>
              <div class="area-rt">
                <div class="f24 flex flex-row items-center"><span class="coin-pic mr-10"></span>5000</div>
                <div class="handle-dh mt-15">兑换</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        tabIndex:1
      },
      methods:{
        switcTab(index){
          this.tabIndex = index;
        }
      }
    })
  </script>
</body>

</html>